<template>
	<view>
		<view class="permission-alert" id="permission-alert" :style="{'transform':isPermissionAlertShow ? 'translateY(0)':'translateY(-100%)'}">
			<view :style="{'margin-top': statusBarHeight + 'px'}" v-if="top"></view>
			<text style="font-size: 20px;margin-bottom: 10px;margin-top: 5px; display: block;">{{title}}权限申请说明：</text>
			<text style="color: darkgray;">好饰商家版正在申请{{title}}权限，{{desc}}</text>
		</view>
		<view>
		</view>
	</view>
</template>
<script>
	let systemInfo = uni.getSystemInfoSync();
	console.log(systemInfo)
	
	export default {
		name:"permission-alert",
		props: {
			title: {
				type: String,
				default: '相册'
			},
			desc: {
					type: String,
					default: '以便为您提供更好的服务'
			},
			isPermissionAlertShow: {
				type: Boolean,
				default: false
			},
			top: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {statusBarHeight: systemInfo.statusBarHeight,};
		},
	}
</script>

<style>
	.permission-alert {
		box-sizing: border-box;
		width: 750rpx;
		/* height: 200rpx; */
		padding: 40rpx 40rpx;
		position: absolute;
		top: 0px;
		z-index: 3;
		border-radius: 5px;
		transition-property: transform;
		transition-duration: 200ms;
		background-color: white;
	}
</style>

